<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>大众点评</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css">

    <link href="./css/blog-detail.css" rel="stylesheet">
    <link href="./css/main.css" rel="stylesheet">

    <style type="text/css">
        .header {
            position: relative;
        }

        .foot-view span {
            font-size: 12px;
        }

        .liked {

        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
        <div class="header-title"></div>
        <div class="header-share">...</div>
    </div>
    <div style="height: 85%; overflow-y: scroll; overflow-x: hidden">
        <div class="blog-info-box" ref="swiper"
             @touchstart="moveStart"
             @touchmove="moving"
             @touchend="moveEnd">
            <div class="swiper-item" v-for="(img, i) in blog.images" :key="i">
                <img :src="img" alt="" style="width: 100%" height="100%">
            </div>
        </div>
        <div class="basic">
            <div class="basic-icon" @click="toOtherInfo">
                <img :src="blog.icon || '/imgs/icons/default-icon.png'" alt="">
            </div>
            <div class="basic-info">
                <div class="name">{{blog.name}}</div>
                <span class="time">{{formatTime(new Date(blog.createTime))}}</span>
            </div>
            <div style="width: 20%">
                <div class="logout-btn" @click="follow" v-show="!user || user.id !== blog.userId ">
                    {{followed ? '取消关注' : '关注'}}
                </div>
            </div>

        </div>
        <div class="blog-text" v-html="blog.content">
        </div>
        <div class="shop-basic">
            <div class="shop-icon">
                <img :src="shop.image" alt="">
            </div>
            <div style="width: 80%">
                <div class="name">{{shop.name}}</div>
                <div>
                    <el-rate
                            v-model="shop.score/10">
                    </el-rate>
                </div>
                <div class="shop-avg">￥{{shop.avgPrice}}/人</div>
            </div>
        </div>
        <div class="zan-box">
            <div>
                <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2187" width="20" height="20">
                    <path d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                          p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
                </svg>
            </div>
            <div class="zan-list">
                <div class="user-icon-mini" v-for="u in likes" :key="u.id">
                    <img :src="u.icon || '/imgs/icons/default-icon.png'" alt="">
                </div>
                <div style="margin-left:10px;text-align: center;line-height: 24px;">{{blog.liked}}人点赞</div>
            </div>
        </div>
        <div class="blog-divider"></div>


        <!--      评论列表-->
        <div class="blog-comments">
            <div class="comments-head">-->
                <div>网友评价 <span>{{this.blog.comments}}</span></div>
                <div><i class="el-icon-arrow-right"></i></div>
            </div>
            <div class="comment-list">
                <div class="comment-box" v-for="item in comments" :key="item.id"
                     style="border-bottom: 1px solid #ccc; padding: 0px 0; ">
                    <div class="comment-info">
                        <div class="comment-user">
                            <el-image :src="item.icon" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
                            <span>{{ item.nickName }}：</span>
                        </div>
                        <div style="float: right">
                            <i class="el-icon-time"></i>
                            {{item.createTime}}
                        </div>
                    </div>
                    <div>
                        <div style="padding: 15px 10px 10px 10px; font-size: 14px">
                            <span>{{ item.content }}</span>
                        </div>   <!--  内容-->
                        <div style="text-align: right">

                            <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复
                            </el-button>
                            <el-button type="text" style="color: red" @click="del(item.id)"
                                       v-if="curUserId === item.userId">删除
                            </el-button>
                        </div>
                    </div>


                    <div v-if="item.children.length" style="padding-left: 50px;">
                        <div v-for="subItem in item.children" :key="subItem.id"
                             style="background-color: #f0f0f0; padding: 5px 20px">
                            <!--          回复列表-->
                            <div style="font-size: 14px; padding: 5px 0; line-height: 25px">
                                <div>
                                    <b style="color: #3a8ee6" v-if="subItem.pnickName">@{{ subItem.pnickName }}</b>
                                </div>
                                <div style="padding-left: 5px">
                                    <b>{{ subItem.nickName }}：</b>
                                    <span>{{ subItem.content }}</span>
                                </div>

                                <div style="display: flex; line-height: 20px; margin-top: 5px; padding-left: 5px">
                                    <div style="width: 200px;">
                                        <i class="el-icon-time"></i><span style="margin-left: 5px">{{ subItem.createTime
                                        }}</span>
                                    </div>
                                    <div style="text-align: right">
                                        <el-button style="margin-left: 5px" type="text"
                                                   @click="handleReply(subItem.id)">回复
                                        </el-button>
                                        <el-button type="text" style="color: red" @click="del(subItem.id)"
                                                   v-if="curUserId === subItem.userId">删除
                                        </el-button>
                                    </div>
                                </div>
                            </div>   <!--  内容-->
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="blog-divider"></div>
    </div>
    <div class="foot">
        <div class="foot-box">
            <div class="foot-view" @click="addLike()">
                <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2187" width="26" height="26">
                    <path d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                          p-id="2188" :fill="blog.isLike ? '#ff6633' : '#82848a'"></path>
                </svg>
                <span :class="{liked: blog.isLike}">{{blog.liked}}</span>
            </div>
        </div>
        <div style="width: 40%">
        </div>
        <!--从这里开始新增-->
        <div class="foot-box">
            <div class="foot-view" @click="handleReply()"><i class="el-icon-chat-square"></i></div>
        </div>
        <!--    <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>-->
        <el-dialog title="评论" :visible.sync="dialogFormVisible" width="80%">
            <el-form label-width="80px" size="small">
                <el-form-item label="内容">
                    <el-input type="textarea" v-model="commentForm.content" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script>
    let each = function (ary, callback) {
        for (let i = 0, l = ary.length; i < l; i++) {
            if (callback(ary[i], i) === false) break
        }
    }
    const app = new Vue({
        el: "#app",
        data: {
            util,
            blog: {},
            shop: {},
            likes: [],
            user: "", // 登录用户
            followed: false, // 是否关注了
            _width: 0,
            duration: 300,
            container: null,
            items: [],
            active: 0,
            start: {
                x: 0,
                y: 0
            },
            move: {
                x: 0,
                y: 0
            },
            sensitivity: 60,
            resistance: 0.3,

            curUserId: localStorage.getItem("userId") ? JSON.parse(localStorage.getItem("userId")) : {},
            commentForm: {},
            dialogFormVisible: false,
            comments: [],
            answerId: null
        },
        created() {
            let id = util.getUrlParam("id");
            this.queryBlogById(id);

            this.loadComment(id);
            // this.queryLoginUser();
            console.log("id"+id)
            console.log("curUserIderererer"+this.curUserId)
        },

        methods: {
            init() {
                // 获得父容器节点
                this.container = this.$refs.swiper
                // 获得所有的子节点
                this.items = this.container.querySelectorAll('.swiper-item')
                this.updateItemWidth()
                this.setTransform()
                this.setTransition('none')
            },

            ////新增
            handleReply(aid) {
                console.log("aid" + aid)
                this.commentForm = {parentId: aid, answerId: aid}
                this.dialogFormVisible = true
            },
            async save() {
                console.log("成功")
                if (!this.user.id) {
                    this.$message.warning("请登录后操作")
                    return
                }
                this.commentForm.blogId = this.blog.id
                if (this.commentForm.contentReply) {  //如果有值的话，因为后台接收的是content
                    this.commentForm.content = this.commentForm.contentReply
                }
                await axios.post("/comment", this.commentForm).then(
                    this.$message.success("评论成功"),
                    this.commentForm = {}, // 初始化评论对象内容

                    this.dialogFormVisible = false,
                    this.loadComment(this.blog.id),
                    console.log("成功到这里")
                ).catch(
                    this.$message.error
                )

            },
            del(id) {
                axios.delete("/comment/" + id).then(res => {
                    console.log("shanchu" + id)
                    this.$message.success("删除成功")
                    this.loadComment(this.blog.id)
                }).catch(err => {
                    this.$message.error("删除失败")
                })

            },


            async loadComment(id) {
                console.log("111" + id);
                try {
                    const res = await axios.get("/comment/tree/" + id);
                    this.comments = res.data;
                } catch (error) {
                    this.$message.error("加载评论失败");
                }
            },
            /////////////////////////////////////////////////////////////区分
            goBack() {
                history.back();
            },
            toOtherInfo() {
                if (this.blog.userId === this.user.id) {
                    location.href = "/info.html"
                } else {
                    location.href = "/other-info.html?id=" + this.blog.userId
                }
            },
            queryBlogById(id) {
                console.log("queryBlogById"+id)
                axios.get("/blog/" + id)
                    .then(({data}) => {
                        data.images = data.images.split(",")
                        this.blog = data;
                        this.$nextTick(this.init);
                        this.queryShopById(data.shopId)
                        this.queryLikeList(id);
                        this.queryLoginUser();
                    })
                    .catch(this.$message.error)
            },
            queryShopById(shopId) {
                axios.get("/shop/" + shopId)
                    .then(({data}) => {
                        data.image = data.images.split(",")[0]
                        this.shop = data
                    })
                    .catch(this.$message.error)
            },
            queryLikeList(id) {
                axios.get("/blog/likes/" + id)
                    .then(({data}) => this.likes = data)
                    .catch(this.$message.error)
            },
            addLike() {
                axios.put("/blog/like/" + this.blog.id)
                    .then(({data}) => {
                        axios.get("/blog/" + this.blog.id)
                            .then(({data}) => {
                                data.images = data.images.split(",")
                                this.blog = data;
                                this.queryLikeList(this.blog.id);
                            })
                            .catch(this.$message.error)
                    })
                    .catch(err => {
                        this.$message.error(err)
                    })
            },
            isFollowed() {
                axios.get("/follow/or/not/" + this.blog.userId)
                    .then(({data}) => this.followed = data)
                    .catch(this.$message.error)
            },
            follow() {
                axios.put("/follow/" + this.blog.userId + "/" + !this.followed)
                    .then(() => {
                        this.$message.success(this.followed ? "已取消关注" : "已关注")
                        this.followed = !this.followed
                    })
                    .catch(this.$message.error)
            },
            formatTime(b) {
                return b.getFullYear() + "年" + (b.getMonth() + 1) + "月" + b.getDate() + "日 ";
            },
            formatMinutes(m) {
                if (m < 10) m = "0" + m
                return m;
            },
            queryLoginUser() {
                // 查询用户信息
                axios.get("/user/me")
                    .then(({data}) => {
                        // 保存用户
                        this.user = data;
                        if (this.user.id !== this.blog.userId) {
                            console.log("queryLoginUser"+this.user.id+"_"+this.blog.userId)
                            this.curUserId = this.user.id

                            this.isFollowed();
                        }
                        // this.curUserId = JSON.parse(sessionStorage.getItem("userId")) ? JSON.parse(sessionStorage.getItem("userId")) : "";
                        console.log("cur"+this.curUserId)
                    })
                    .catch(console.log)
            },
            // 获取父容器宽度，并且更新所有的子节点宽度，因为我们默认所有子节点的宽高等于父节点的宽高
            updateItemWidth() {
                this._width = this.container.offsetWidth || document.documentElement.offsetWidth
            },
            // 根据当前活动子项的下标计算各个子项的X轴位置
            // 计算公式(子项的下标 - 当前活动下标) * 子项宽度 + 偏移(手指移动距离)；
            setTransform(offset) {
                offset = offset || 0
                each(this.items, (item, i) => {
                    let distance = (i - this.active) * this._width + offset
                    let transform = `translate3d(${distance}px, 0, 0)`
                    item.style.webkitTransform = transform
                    item.style.transform = transform
                })
            },
            // 给每一个子项添加transition过度动画
            setTransition(duration) {
                duration = duration || this.duration
                duration = typeof duration === 'number' ? (duration + 'ms') : duration
                each(this.items, (item) => {
                    item.style.webkitTransition = duration
                    item.style.transition = duration
                })
            },
            moveStart(e) {
                console.log('moveStart')
                this.start.x = e.changedTouches[0].pageX
                this.start.y = e.changedTouches[0].pageY
                this.setTransition('none')
            },
            moving(e) {
                console.log('moving')
                e.preventDefault()
                e.stopPropagation()
                let distanceX = e.changedTouches[0].pageX - this.start.x
                let distanceY = e.changedTouches[0].pageY - this.start.y
                if (Math.abs(distanceX) > Math.abs(distanceY)) {
                    this.isMoving = true
                    this.move.x = this.start.x + distanceX
                    this.move.y = this.start.y + distanceY
                    // 当活动子项为第一项且手指向右滑动或者活动项为最后一项切向左滑动的时候，添加阻力，形成一个拉弹簧的效果
                    if ((this.active === 0 && distanceX > 0) || (this.active === (this.items.length - 1) && distanceX < 0)) {
                        distanceX = distanceX * this.resistance
                    }
                    this.setTransform(distanceX)
                }
            },
            moveEnd(e) {
                console.log('moveEnd')
                if (this.isMoving) {
                    e.preventDefault()
                    e.stopPropagation()
                    let distance = this.move.x - this.start.x
                    if (Math.abs(distance) > this.sensitivity) {
                        if (distance < 0) {
                            this.next()
                        } else {
                            this.prev()
                        }
                    } else {
                        this.back()
                    }
                    this.reset()
                    this.isMoving = false
                }
            },
            next() {
                let index = this.active + 1
                // 运用动画切换到指定下标的子项
                this.go(index)
            },
            prev() {
                let index = this.active - 1
                // 运用动画切换到指定下标的子项
                this.go(index)
            },
            reset() {
                this.start.x = 0
                this.start.y = 0
                this.move.x = 0
                this.move.y = 0
            },
            back() {
                this.setTransition()
                this.setTransform()
            },
            destroy() {
                this.setTransition('none')
            },
            // 运用动画切换到指定下标的子项
            go(index) {
                this.active = index
                if (this.active < 0) {
                    this.active = 0
                } else if (this.active > this.items.length - 1) {
                    this.active = this.items.length - 1
                }
                this.$emit('change', this.active)
                this.setTransition()
                this.setTransform()
            }
        }
    })
</script>
</body>
</html>